<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>屏幕设备的一些概念 - vzvixb</title>
  <meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">


<meta name="author" content="zhou" /><meta name="description" content="ppi dip dpr(设备相思是比) 分辨率 屏幕尺寸 设备物理像素 设备独立像素 分辨率：1920px * 1080px 在这个设备上纵向上有 1920个像素点（色块) 屏幕尺寸" /><meta name="keywords" content="Hugo, theme, even" />






<meta name="generator" content="Hugo 0.90.1 with theme even" />


<link rel="canonical" href="https://zhouxiaoxin.gitee.io/post/htmlcss/%E5%B1%8F%E5%B9%95%E8%AE%BE%E5%A4%87%E7%9A%84%E4%B8%80%E4%BA%9B%E6%A6%82%E5%BF%B5/" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<link href="/sass/main.min.32d4dc642fec98c34c80bebb9c784c50771712b4a8a25d9f4dd9cce3534b426e.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">


<meta property="og:title" content="屏幕设备的一些概念" />
<meta property="og:description" content="ppi dip dpr(设备相思是比) 分辨率 屏幕尺寸 设备物理像素 设备独立像素 分辨率：1920px * 1080px 在这个设备上纵向上有 1920个像素点（色块) 屏幕尺寸" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://zhouxiaoxin.gitee.io/post/htmlcss/%E5%B1%8F%E5%B9%95%E8%AE%BE%E5%A4%87%E7%9A%84%E4%B8%80%E4%BA%9B%E6%A6%82%E5%BF%B5/" /><meta property="article:section" content="post" />
<meta property="article:published_time" content="2017-08-28T17:18:00+00:00" />
<meta property="article:modified_time" content="2017-08-28T17:18:00+00:00" />

<meta itemprop="name" content="屏幕设备的一些概念">
<meta itemprop="description" content="ppi dip dpr(设备相思是比) 分辨率 屏幕尺寸 设备物理像素 设备独立像素 分辨率：1920px * 1080px 在这个设备上纵向上有 1920个像素点（色块) 屏幕尺寸"><meta itemprop="datePublished" content="2017-08-28T17:18:00+00:00" />
<meta itemprop="dateModified" content="2017-08-28T17:18:00+00:00" />
<meta itemprop="wordCount" content="2087">
<meta itemprop="keywords" content="H5," /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="屏幕设备的一些概念"/>
<meta name="twitter:description" content="ppi dip dpr(设备相思是比) 分辨率 屏幕尺寸 设备物理像素 设备独立像素 分辨率：1920px * 1080px 在这个设备上纵向上有 1920个像素点（色块) 屏幕尺寸"/>

<!--[if lte IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

</head>
<body>
  <div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/" class="logo">Even</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    <a href="/">
        <li class="mobile-menu-item">Home</li>
      </a><a href="/post/">
        <li class="mobile-menu-item">Archs</li>
      </a><a href="/tags/">
        <li class="mobile-menu-item">Tags</li>
      </a><a href="/categories/">
        <li class="mobile-menu-item">Cates</li>
      </a><a href="/about/">
        <li class="mobile-menu-item">About</li>
      </a><a href="/pages/runoob/">
        <li class="mobile-menu-item">runoob</li>
      </a><a href="/pages/98wubi/">
        <li class="mobile-menu-item">98wubi</li>
      </a>
  </ul>
</nav>
  <div class="container" id="mobile-panel">
    <header id="header" class="header">
        <div class="logo-wrapper">
  <a href="/" class="logo">Even</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
        <a class="menu-item-link" href="/">Home</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/post/">Archs</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/tags/">Tags</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/categories/">Cates</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/about/">About</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/pages/runoob/">runoob</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/pages/98wubi/">98wubi</a>
      </li>
  </ul>
</nav>
    </header>

    <main id="main" class="main">
      <div class="content-wrapper">
        <div id="content" class="content">
          <article class="post">
    
    <header class="post-header">
      <h1 class="post-title">屏幕设备的一些概念</h1>

      <div class="post-meta">
        <span class="post-time"> 2017-08-28 </span>
        <div class="post-category">
            <a href="/categories/h5/"> H5 </a>
            </div>
          <span class="more-meta"> 约 2087 字 </span>
          <span class="more-meta"> 预计阅读 5 分钟 </span>
        <span id="busuanzi_container_page_pv" class="more-meta"> <span id="busuanzi_value_page_pv"><img src="/img/spinner.svg" alt="spinner.svg"/></span> 次阅读 </span>
      </div>
    </header>

    <div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">文章目录</h2>
  <div class="post-toc-content">
    <nav id="TableOfContents">
  <ul>
    <li><a href="#二-css单位pxemremvwvh">二 css单位：px,em,rem,vw,vh:</a></li>
    <li><a href="#三-viewport-虚拟视窗">三 viewport 虚拟视窗</a>
      <ul>
        <li><a href="#1-layout-viewport">1. layout viewport</a></li>
        <li><a href="#2-visual-viewport">2. visual viewport</a></li>
        <li><a href="#3-ideal-viewport">3. ideal viewport</a></li>
        <li><a href="#4-缩放因子">4. 缩放因子：</a></li>
        <li><a href="#rem的计算">rem的计算</a></li>
      </ul>
    </li>
    <li><a href="#四-移动端简单rem2px方案">四 移动端简单rem2px方案</a></li>
    <li><a href="#推荐文章">推荐文章</a></li>
  </ul>
</nav>
  </div>
</div>
    <div class="post-content">
      <ul>
<li>ppi</li>
<li>dip</li>
<li>dpr(设备相思是比)</li>
<li>分辨率</li>
<li>屏幕尺寸</li>
<li>设备物理像素</li>
<li>设备独立像素</li>
</ul>
<!-- raw HTML omitted -->
<ul>
<li>
<p><input checked="" disabled="" type="checkbox"> 分辨率：1920px * 1080px  在这个设备上纵向上有 1920个像素点（色块)</p>
</li>
<li>
<p><input checked="" disabled="" type="checkbox"> 屏幕尺寸：5英寸(in) = 5 * 2.54(cm) 指的是在这个屏幕上对角线的长度使用英寸单位 这个值是每个设备固定不变的</p>
</li>
<li>
<p><input checked="" disabled="" type="checkbox"> 像素密度ppi: ppi和dpi 指的是一个设备上每英寸长度上有多少个像素点 ppi = 对角线上的像素数量/尺寸</p>
</li>
<li>
<p><input checked="" disabled="" type="checkbox"> 设备像素比dpr: 指的是一个设备上的 物理像素和独立像素的比值 dpr = 设备像素/设备独立像素(css像素)</p>
</li>
</ul>
<blockquote>
<p>在javascript中，可以通过<code>window.devicePixelRatio</code>获取到当前设备的dpr。
在css中，可以通过<code>-webkit-device-pixel-ratio</code>，<code>-webkit-min-device-pixel-ratio</code>和 <code>-webkit-max-device-pixel-ratio</code>进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。</p>
</blockquote>
<ul>
<li>
<p><input checked="" disabled="" type="checkbox"> dpr = 设备像素/CSS像素 = 设备像素 / 设备独立像素 <code>~=</code> PPI/160 = 页面缩放比例根据dpr可以判断 一个 css像素代表多少个设备像素点 1:1, 2:1 一个css像素代表4个物理像素3:1 一个css像素代表9个物理像素</p>
</li>
<li>
<p><input checked="" disabled="" type="checkbox"> 设备像素(物理像素) : 指的就是设备的 分辨率 大小</p>
</li>
<li>
<p><input checked="" disabled="" type="checkbox"> 设备独立像素(逻辑像素) dip: 指的是 css的像素 ideal viewport   (dip)设备独立像素 === css像素 === 逻辑像素</p>
</li>
</ul>
<h2 id="二-css单位pxemremvwvh">二 css单位：px,em,rem,vw,vh:</h2>
<ul>
<li>px:     相对单位 根据dpr 相对设备物理像素的 数量</li>
<li>em:     相对单位 根据父元素的字体大小，相对父元素的字体大小成倍</li>
<li>rem:    相对单位 根据根目录html的字体大小，相对html元素字体大小成倍</li>
<li>vw,vh:  相对单位 根据每个设备的屏幕大小，宽和高，相对屏幕分成100份 100vw,100vh为满屏</li>
<li>rem详细：
<blockquote>
<p>所谓的「root element」其实不是想象的那样，一个是16，一个是18，到底取的是那个 root element 的字体大小。
ok，rem 的计算的时候，px 的方式会有一个16不随系统字体大小改变
1rem = 1 * (htmlFontSize / 16) * defaultFontSize。
在有些 Android 手机上，浏览器或 webview 的默认字体defaultFontSize是随着系统设置的字体改变的。</p>
</blockquote>
</li>
</ul>
<h2 id="三-viewport-虚拟视窗">三 viewport 虚拟视窗</h2>
<h3 id="1-layout-viewport">1. layout viewport</h3>
<p>默认虚拟视窗为980px
document.documentElement.clientWidth和clientHeight可以获取layout viewport的尺寸</p>
<h3 id="2-visual-viewport">2. visual viewport</h3>
<p>可视的视窗相对于 ideal viewport缩放
window.innerWidth/Height来获取visual viewport的尺寸</p>
<h3 id="3-ideal-viewport">3. ideal viewport</h3>
<p>ideal viewport的宽度等于移动设备的屏幕宽度(即设备逻辑像素)，跟设备的物理宽度没有关系
ideal viewport的宽度 = 屏幕的逻辑像素宽度</p>
<h3 id="4-缩放因子">4. 缩放因子：</h3>
<p>相对于ideal viewport来缩放的
缩放改变的是 每CSS像素单位代表的物理像素长度，而设备像素保持不变
zoom factor = ideal viewport width / visual viewport width</p>
<h3 id="rem的计算">rem的计算</h3>
<p>在没有设置html的fontSize值时，获取html fontSize的计算值，得到的就是defaultFontSize：
window.getComputedStyle(document.documentElement, null).getPropertyValue(&lsquo;font-size&rsquo;)
这时html fontSize的设置值为空：
document.documentElement.style.fontSize</p>
<p>修改系统的默认字体在Android某些机型上会影响计算值（但这个值是个近似值，所以使用1rem的宽度的计算值作为计算基准）。不管是css还是js，其实都是修改html fontSize的设置值，不存在覆盖的问题。</p>
<p>计算值有单独的算法，而rem是根据html fontSize的计算值进行计算的：</p>
<p>没有设置html的fontSize的时候：
1rem = 1 * computedFontSize = 1 * defaultFontSize；
将html的fontSize设置为百分百值时：
1rem = 1 * computedFontSize = 1 * setFontSize * defaultFontSize；
将html的fontSize设置为px值时：
1rem = 1 * computedFontSize = 1 * (setFontSize / 16) * defaultFontSize；</p>
<h2 id="四-移动端简单rem2px方案">四 移动端简单rem2px方案</h2>
<p><strong>js实现方法</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">
<span class="p">;(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="nx">win</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// 计算 rem的值
</span><span class="c1"></span>    <span class="kd">function</span> <span class="nx">adbt</span><span class="p">(</span><span class="nx">designWidth</span><span class="p">,</span> <span class="nx">rem2px</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">d</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
        <span class="nx">d</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">&#39;1rem&#39;</span><span class="p">;</span>
        <span class="nx">d</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s2">&#34;none&#34;</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">head</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;head&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
        <span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">d</span><span class="p">);</span>
        <span class="kd">var</span> <span class="nx">defaultFontSize</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">getComputedStyle</span><span class="p">(</span><span class="nx">d</span><span class="p">,</span> <span class="kc">null</span><span class="p">).</span><span class="nx">getPropertyValue</span><span class="p">(</span><span class="s1">&#39;width&#39;</span><span class="p">)),</span>
        <span class="nx">docEl</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">,</span>
        <span class="nx">clientWidth</span> <span class="o">=</span> <span class="nx">docEl</span><span class="p">.</span><span class="nx">clientWidth</span><span class="p">,</span>
        <span class="nx">resizeEvt</span> <span class="o">=</span> <span class="s1">&#39;orientationchange&#39;</span> <span class="k">in</span> <span class="nb">window</span> <span class="o">?</span> <span class="s1">&#39;orientationchange&#39;</span> <span class="o">:</span> <span class="s1">&#39;resize&#39;</span><span class="p">,</span>
        <span class="nx">recalc</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">clientWidth</span> <span class="o">=</span> <span class="nx">docEl</span><span class="p">.</span><span class="nx">clientWidth</span><span class="p">;</span>
            <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">clientWidth</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">clientWidth</span> <span class="o">&gt;</span> <span class="mi">750</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">docEl</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="mi">100</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span><span class="p">;</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="nx">docEl</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="p">(</span><span class="nx">clientWidth</span> <span class="o">/</span> <span class="nx">designWidth</span> <span class="o">*</span> <span class="nx">rem2px</span> <span class="o">/</span> <span class="nx">defaultFontSize</span> <span class="p">)</span> <span class="o">*</span> <span class="mi">100</span> <span class="o">+</span> <span class="s2">&#34;%&#34;</span> <span class="p">;</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">docEl</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span><span class="p">)</span>
            <span class="p">}</span>
        <span class="p">};</span>
        <span class="nx">docEl</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="nx">clientWidth</span> <span class="o">/</span> <span class="nx">designWidth</span> <span class="o">*</span> <span class="nx">rem2px</span> <span class="o">/</span> <span class="nx">defaultFontSize</span> <span class="o">*</span> <span class="mi">100</span> <span class="o">+</span> <span class="s2">&#34;%&#34;</span> <span class="p">;</span>
        <span class="c1">// Abort if browser does not support addEventListener
</span><span class="c1"></span>        <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">doc</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
        <span class="nx">win</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="nx">resizeEvt</span><span class="p">,</span> <span class="nx">recalc</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
        <span class="nx">doc</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;DOMContentLoaded&#39;</span><span class="p">,</span> <span class="nx">recalc</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
        <span class="k">return</span> <span class="nx">defaultFontSize</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="c1">// 延时，让浏览器处理完viewport造成的影响，然后再计算root font-size。
</span><span class="c1"></span>    <span class="c1">//设置 设计稿的尺寸和比例
</span><span class="c1"></span>    <span class="nx">adbt</span><span class="p">(</span><span class="mi">750</span><span class="p">,</span> <span class="mi">100</span><span class="p">)</span>

<span class="p">})(</span><span class="nb">document</span><span class="p">,</span> <span class="nb">window</span><span class="p">);</span>

</code></pre></td></tr></table>
</div>
</div><p><strong>css3实现方法</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="o">$</span><span class="nt">vw_base</span> <span class="o">=</span> <span class="nt">750</span>
<span class="nt">html</span> <span class="p">{</span>
    <span class="k">font-size</span><span class="p">:</span> <span class="mi">20</span><span class="kt">px</span><span class="p">;</span> <span class="c">/*不支持vw单位时，回退到px单位*/</span>
    <span class="k">font-size</span><span class="p">:</span> <span class="nb">calc</span><span class="p">(</span><span class="mi">100</span><span class="o">/</span><span class="p">(</span><span class="err">$</span><span class="n">vw_base</span><span class="o">/</span><span class="mi">100</span><span class="p">)</span><span class="o">*</span><span class="mi">1</span><span class="kt">vw</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/*横屏*/</span>
<span class="p">@</span><span class="k">media</span> <span class="nt">screen</span> <span class="nt">and</span> <span class="o">(</span><span class="nt">orientation</span><span class="o">:</span> <span class="nt">landscape</span><span class="o">)</span> <span class="p">{</span>
  <span class="nt">html</span> <span class="p">{</span>
    <span class="k">font-size</span><span class="p">:</span> <span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
    <span class="k">font-size</span><span class="p">:</span> <span class="nb">calc</span><span class="p">(</span><span class="mi">100</span><span class="o">/</span><span class="p">(</span><span class="err">$</span><span class="n">vw_base</span><span class="o">/</span><span class="mi">100</span><span class="p">)</span><span class="o">*</span><span class="mi">1</span><span class="kt">vh</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>

</code></pre></td></tr></table>
</div>
</div><p><strong>适配iphoneX</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">// 需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width, viewport-fit=cover&#34;</span><span class="p">&gt;</span>
// 根据情况设置padding或者margin
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS <span class="p">&lt;</span> <span class="nt">11.2</span> <span class="err">*/</span>
<span class="na">padding-bottom:</span> <span class="na">env</span><span class="err">(</span><span class="na">safe-area-inset-bottom</span><span class="err">);</span> <span class="err">/*</span> <span class="na">兼容</span> <span class="na">iOS</span> <span class="p">&gt;</span>= 11.2 */

</code></pre></td></tr></table>
</div>
</div><h2 id="推荐文章">推荐文章</h2>
<ul>
<li><a href="http://www.chinaz.com/manage/2015/0902/441624.shtml/"> 全解析屏幕尺寸，分辨率，像素，PPI之间到底什么关系？ </a></li>
<li><a href="http://blog.csdn.net/aiolos1111/article/details/51967744/"> 深入理解移动端像素知识与Viewport知识 </a></li>
<li><a href="http://www.cnblogs.com/2050/p/3877280.html/"> 移动前端开发之viewport的深入理解 </a></li>
<li><a href="http://www.cnblogs.com/lovesueee/p/4618454.html">移动端高清、多屏适配方案</a></li>
<li><a href="https://github.com/hbxeagle/rem/blob/master/README.md"> 了解真实的『REM』手机屏幕适配 </a></li>
</ul>

    </div>

    <div class="post-copyright">
  <p class="copyright-item">
    <span class="item-title">文章作者</span>
    <span class="item-content">zhou</span>
  </p>
  <p class="copyright-item">
    <span class="item-title">上次更新</span>
    <span class="item-content">
        2017-08-28
        
    </span>
  </p>
  
  
</div>
<footer class="post-footer">
      <div class="post-tags">
          <a href="/tags/h5/">H5</a>
          </div>
      <nav class="post-nav">
        <a class="prev" href="/post/linux/linux%E5%B8%B8%E7%94%A8%E6%8C%87%E4%BB%A4/">
            <i class="iconfont icon-left"></i>
            <span class="prev-text nav-default">Linux常用指令</span>
            <span class="prev-text nav-mobile">上一篇</span>
          </a>
        <a class="next" href="/post/javascript/javascript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">
            <span class="next-text nav-default">JavaScript面向对象精要读书笔记</span>
            <span class="next-text nav-mobile">下一篇</span>
            <i class="iconfont icon-right"></i>
          </a>
      </nav>
    </footer>
  </article>
        </div>
        

  

  

      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="social-links">
      <a href="mailto:your@email.com" class="iconfont icon-email" title="email"></a>
      <a href="http://localhost:1313" class="iconfont icon-stack-overflow" title="stack-overflow"></a>
      <a href="http://localhost:1313" class="iconfont icon-twitter" title="twitter"></a>
      <a href="http://localhost:1313" class="iconfont icon-facebook" title="facebook"></a>
      <a href="http://localhost:1313" class="iconfont icon-linkedin" title="linkedin"></a>
      <a href="http://localhost:1313" class="iconfont icon-google" title="google"></a>
      <a href="http://localhost:1313" class="iconfont icon-github" title="github"></a>
      <a href="http://localhost:1313" class="iconfont icon-weibo" title="weibo"></a>
      <a href="http://localhost:1313" class="iconfont icon-zhihu" title="zhihu"></a>
      <a href="http://localhost:1313" class="iconfont icon-douban" title="douban"></a>
      <a href="http://localhost:1313" class="iconfont icon-pocket" title="pocket"></a>
      <a href="http://localhost:1313" class="iconfont icon-tumblr" title="tumblr"></a>
      <a href="http://localhost:1313" class="iconfont icon-instagram" title="instagram"></a>
      <a href="http://localhost:1313" class="iconfont icon-gitlab" title="gitlab"></a>
      <a href="http://localhost:1313" class="iconfont icon-bilibili" title="bilibili"></a>
  <a href="https://zhouxiaoxin.gitee.io/index.xml" type="application/rss+xml" class="iconfont icon-rss" title="rss"></a>
</div>

<div class="copyright">
  <span class="power-by">
    由 <a class="hexo-link" href="https://gohugo.io">Hugo</a> 强力驱动
  </span>
  <span class="division">|</span>
  <span class="theme-info">
    主题 - 
    <a class="theme-link" href="https://github.com/olOwOlo/hugo-theme-even">Even</a>
  </span>

  <div class="busuanzi-footer">
    <span id="busuanzi_container_site_pv"> 本站总访问量 <span id="busuanzi_value_site_pv"><img src="/img/spinner.svg" alt="spinner.svg"/></span> 次 </span>
      <span class="division">|</span>
    <span id="busuanzi_container_site_uv"> 本站总访客数 <span id="busuanzi_value_site_uv"><img src="/img/spinner.svg" alt="spinner.svg"/></span> 人 </span>
  </div>

  <span class="copyright-year">
    &copy; 
    2018 - 
    2022
    <span class="heart">
      <i class="iconfont icon-heart"></i>
    </span>
    <span class="author">even</span>
  </span>
</div>
    </footer>

    <div class="back-to-top" id="back-to-top">
      <i class="iconfont icon-up"></i>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>



<script type="text/javascript" src="/js/main.min.2517c0eb67172a0bae917de4af59b10ca2531411a009d4c0b82f5685259e5771.js"></script>








</body>
</html>
